/**
 * DOM Ready
 * @author Joan Muñoz
 */
jQuery(function($){
  Home.init();
});


/**
 * Clase
 */
var Home = new (function(){
  
  /**
   * Ancho del banner
   * @author Sahib J. Leo
   */
  var banner_width = 0;

  /**
   * ID del timeout para cambiar al siguiente banner
   * @author Sahib J. Leo
   */
  var slideshow_timeout;

  /**
   * Flag para saber si el slideshow esta animando un banner o no
   * @author Sahib J. Leo
   */
  var slideshow_bussy = false;

  /**
   * Indice del banner que esta mostrando el slideshow
   * @author Sahib J. Leo
   */
  var slideshow_index = 0;

  /**
   * 
   * Inicializa las acciones
   * @author Joan Muñoz
   * 
   */
  this.init = function() {
    // Inserta el slideshow
    this.initSlideShow();
    
    // Inicia las acciones del slide show
    this.onResize();
  };

  /**
   * Inicia el slide show de banners, con la lista de banners "_banners" que
   * es definida en la vista index.php
   * @author Sahib J. Leo
   */
  this.initSlideShow = function()
  {
    /*
     * Primero hay que que hacer preload de imagenes
     */
    var loaded_images = 0;

    $('body').append( '<div id="slideshow"><ul class="clearfix"></ul></div>' );

    for(var i in _banners){
      var BannerImg = $('<img>').on('load', function(e)
      {
        loaded_images++;
        if(loaded_images == _banners.length){
          Home.createSlider();
        }
      });
      
      // Crear el bullet del banner
      $('#home_banners_bullets').append(
        $('<a>').attr('href', '#').addClass('home_banner_bullet').text(i)
          .on('click', function(e)
          {
            /*
             * Al hacer click en el bullet animamos el banner que le corresponde
             * siempre y cuando el slide show no este ocupado y el banner actual
             * no sea el mismo que representa el bullet.
             */
            var index = parseInt($(this).text(), 10);
            if(!slideshow_bussy && slideshow_index != index){
              clearTimeout(slideshow_timeout);
              Home.switchToBanner( index );
            }
          })
      );

      // Precargar la imagen
      BannerImg.attr('src', 'img/home/banners/'
        + _banners[i].id + '-' + LANG + '.jpg');
    }
  }

  /**
   * Crea el wrapper del slider y la lista, pero solo agrega el primer
   * banner, los otros banners se van agregando bajo demanda.
   * 
   * @author Sahib J. Leo
   */
  this.createSlider = function()
  {
    // Crear el wrapper e insertar el primer bannersuco
    $('ul', '#slideshow').append( this.createBanner(0) );
    
    // Calcular el ancho de la lista de banners, es el doble del ancho del banner
    banner_width = $('li:first', '#slideshow').width();
    $('ul', '#slideshow').width( banner_width * 2 );

    // Activar el primer bullet
    $('.home_banner_bullet:first').addClass('active');

    // Iniciamos el timeout del primer banner para que cambie al siguiente.
    this.startBannerTimeout(0);
  }

  /**
   * Crea un elemento <li> que contiene un elemento <img> para insertarlo en 
   * la lista <ul> del #slideshow
   * 
   * @author Sahib J. Leo
   * @return {String} Código HTML de los elementos creados
   */
  this.createBanner = function(index)
  {
    return '<li><img src="img/home/banners/'
      + _banners[index].id + '-' + LANG + '.jpg" /></li>';
  }

  /**
   * Inicia el timeout para cambiar al siguiente banner, el tiempo del timeout
   * esta definido por los segundos del banner especificado por index
   *
   * @author Sahib J. Leo
   * @param  {Number} index Indice del banner en _banners
   */
  this.startBannerTimeout = function(index)
  {
    var next_index = index + 1;
    
    if(next_index == _banners.length){
      next_index = 0;
    }

    slideshow_timeout = setTimeout(function()
    {
      Home.switchToBanner( next_index );
    }, _banners[index].segundos * 1000);
  }

  /**
   * Realiza la animación para cambiar al banner especificado por index
   * Durante la animación "slideshow_bussy" será true, al terminar se elimina
   * el antiguo banner.
   *
   * @author Sahib J. Leo
   * @param  {Number} index Indice del banner en _banners
   */
  this.switchToBanner = function(index)
  {
    // Activar el bullet del banner correspondiente
    $('.home_banner_bullet').removeClass('active').eq(index).addClass('active');
    slideshow_bussy = true;
    $('ul', '#slideshow').append( this.createBanner(index) ).animate(
      {left: -banner_width + 'px'}, 2000, function()
      {
        // Eliminar el primer banner y ajustar la posicion de la lista
        $('li:first', '#slideshow').remove();
        $(this).css('left', '0px');

        // Iniciar el timeout para el siguiente banner
        // Si ya llegamos al final iniciamos desde el primer banner
        slideshow_bussy = false;
        slideshow_index = index;
        Home.startBannerTimeout(index);
      }
    );
  }

  /**
   * Al ajustar la pagina
   */
  this.onResize = function() {
   if ( $('body').width() < $('#container').width() ) {
     $('html').css('overflow-x', 'auto');
   } else {
     $('html').css('overflow-x', 'hidden');
   }
  };
  
})();

/**
 * Resize
 */
window.onresize = Home.onResize;
